<template>
  <el-dialog
    :visible.sync="dialogVisible"
    :before-close="handleClose"
    :append-to-body="false"
    :show-close="true"
    :close-on-click-modal="false"
    class="order-kind-dialog small-common-dialog-size mobile-el-dialog">
    <Title title="邀请评分" font-size="16px" style="margin-bottom: 16px;"/>
    <div class="body-form">
      <el-form
        ref="scoreForm"
        :rules="rules"
        :model="formInfo"
        label-width="90px"
        class="form">
        <el-form-item label="评分人员" prop="scorerIds">
          <selectWithUserLoad
            ref="scorerRef"
            v-model="formInfo.scorerIds"
            :multiple="true"
            :show-check-user="true"
            :loadmore-method="getData()"
            key-name="id"
            class="width240"
            label-name="userName"
            filterable
          />
        </el-form-item>
        <el-form-item label="任务描述">
          <el-input v-model="formInfo.describe" :maxlength="200" class="width240" placeholder="请输入任务描述" size="small" />
        </el-form-item>
      </el-form>
    </div>
    <div class="btn-container">
      <el-button :loading="confirmLoading" type="primary" size="small" @click="handleSubmit">发送飞书通知</el-button>
    </div>
  </el-dialog>
</template>

<script>
import Title from '@/components/Title';
import selectWithUserLoad from '@/components/Common/selectWithUserLoad';
import { inviteScore, scorerList } from '@/api/filter';

export default {
  components: { Title, selectWithUserLoad },
  data() {
    return {
      dialogVisible: false,
      formInfo: {
        ids: '',
        scorerIds: [],
        describe: ''
      },
      confirmLoading: false,
      rules: {
        'scorerIds': [{ required: true, message: '请选择邀请评分人员', trigger: 'change' }]
      },
      userList: []
    };
  },
  methods: {
    getData() {
      const a = function(params) {
        return new Promise((resolve, reject) => {
          params.page = 1;
          params.perPage = 500;
          scorerList(params).then(res => {
            resolve(res);
          }).catch(err => {
            reject(err);
          });
        });
      };
      return a;
    },
    openDialog(val) {
      this.formInfo.ids = val;
      this.dialogVisible = true;
    },
    handleClose() {
      this.$refs['scoreForm'].resetFields();
      this.dialogVisible = false;
    },
    handleSubmit() {
      this.$refs.scoreForm.validate(valid => {
        if (valid) {
          this.confirmLoading = true;
          const params = JSON.parse(JSON.stringify(this.formInfo));
          params.scorerIds = params.scorerIds.join();
          inviteScore(params).then(res => {
            if (res.code === 200) {
              this.handleClose();
              this.$message.success('操作成功');
              this.$emit('update');
            }
          }).finally(_ => {
            this.confirmLoading = false;
          });
        } else {
          this.$message.warning('请检查信息是否填写完整');
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.form {
  ::v-deep {
    .el-form-item {
      margin-bottom: 22px !important;
    }
    .el-tag.el-tag--info {
      color: #406eff;
      background: #eff3fb;
      display: flex;
      align-items: center;
      .el-tag__close {
        right: 0;
        margin: 0 0 0 3px;
      }
    }
  }
}
.body-form {
  @include scrollBar($width: 6px)
}
.width240 {
  width: 240px;
}
.btn-container {
  display: flex;
  justify-content: center;
  margin-top: 16px;
}
</style>
